<!-- 广场 - 文章详情 -->
<template>
  <view class="overflow-x-hidden">
    <view class="pb-30">
      <view class="px-4 c-#333 text-40 font-bold">{{ article?.title || '' }}</view>
      <view class="px-4 flex items-center mt-2.5">
        <image class="flex-shrink-0 w-70 h-70" src="/static/images/common/ic_eight_icon.jpg" mode="aspectFill" />
        <view class="flex-1 flex flex-col ml-2">
          <view class="c-#666 text-28">八零学社</view>
          <view class="flex mt-1 c-#999 text-24">
            <view class="flex-1">{{ article?.createtime || '' }}</view>
            <view class="flex-shrink-0">来源：{{ article?.source || '' }}</view>
          </view>
        </view>
      </view>
      <u-parse class="mt-3 px-4" :html="article?.content || ''" />
      <button class="flex justify-end items-center mx-4  py-3 u-reset-button" open-type="share">
        <view class="text-24 c-#999 pr-2">分享</view>
        <image class="w-47 h-47" src="/static/images/common/img_wx.png" />
      </button>
      <view class="h-10 bg-#f8f8f8" />
      <view v-if="state.data?.next || state.data?.prev" class="px-4 pt-3 text-24">
        <view v-if="state.data?.next" class="c-#f4af22" @click="onArticleChange(state.data?.next)">下一篇：{{
          state.data?.next?.title || '' }}</view>
        <view v-if="state.data?.prev" class="c-#b5b5b5" @click="onArticleChange(state.data?.prev)">上一篇：{{
          state.data?.prev?.title || '' }}</view>
      </view>
      <view class="px-4">
        <view class="mt-7 c-#333 text-40">相关课程</view>
        <view class="mt-4 grid grid-cols-2 gap-2">
          <course-item v-for="item in state.data?.classes" :key="item.id" :data="item" />
        </view>
        <view class="mt-7 c-#333 text-40 font-semibold">评论({{ state.comment?.total || 0 }})</view>
        <view class="mt-4">
          <appraise-item v-for="item in state.comment?.data" :key="item.id" :data="item" @like="onToggleCommenLike(item)"
            @complaint="onCommentComplaint(item)" />
        </view>
      </view>
    </view>
  </view>
  <view :style="{ bottom: state.bottom + 'px' }" class="w-full flex items-center bg-#fff border-bottom px-4 h-150  fixed">
    <view class="input-style">
      <image class="w-28 h-23" src="/static/images/common/ic_discuss.jpg" />
      <input :adjust-position="false" @focus="onFocus" @blur="onBlur" v-model="state.commentContent" class="flex-1 ml-2"
        placeholder="来都来了，说两句吧" />
    </view>
    <view class="btn-send"
      :class="[{ 'opacity-50': !state.commentContent, 'pointer-events-none': !state.commentContent }]"
      @click="onSendComment">发送</view>
  </view>

  <u-popup v-model="state.complaintShow" mode="bottom" border-radius="12" closeable close-icon-size="21"
    @close="state.complaintShow = false">
    <view class="flex items-center justify-center h-95 c-#333 text-32">投诉评论</view>
    <view class="mx-4">
      <view class="mt-2 c-#999 text-28 text-maxline-1">
        <text>@{{ state.actionComment?.user?.nickname }}：</text>
        <text>{{ state.actionComment?.comment_content || '' }}</text>
      </view>
      <scroll-view class="whitespace-nowrap w-full mt-5" scroll-x enhanced :show-scrollbar="false">
        <view :class="[state.complaintIndex == index ? 'popup-tap-style' : 'popup-tap-style-selected']"
          v-for="(item, index) in complaintType" :key="index" @click="state.complaintIndex = index">
          {{ item }}
        </view>
      </scroll-view>

    </view>
    <view class="h-150 mt-8"></view>
    <view class="bottom-wrap-16 w-full bg-#fff border-top px-4">
      <view class="popup-button-style" @click="onComplaintSubmit">提交</view>
    </view>
  </u-popup>
</template>
<script setup>
import { showToast } from '@/common/util/uni.js'
import { numFormat } from '@/common/util/format.js'
import { getArticleDetail, getArticleCommentList, postArticleCommentAdd, postArticleCommentTipOff, postArticleCommentToggleLike, postArticleShareStatistics } from "@/common/http/module/square.js";
import { useUserStore } from '@/store/user';

const userStore = useUserStore()

const state = reactive({
  id: '',
  data: '',
  content: '',
  comment: '',
  actionComment: '', // 举报时需要记住当前是举报的哪个评论
  complaintShow: false,
  complaintIndex: 0,
  commentContent: '',
  bottom: 0
});
const complaintType = ['垃圾广告', '人身攻击', '侵权抄袭', '违法违规']

const article = computed(() => state.data?.article)


watch(() => userStore.isLogin, (val) => {
  if (val) {
    loadData()
  }
})

function loadData() {
  getArticleDetail(state.id).then(res => {
    state.data = res.data
  })
}

function onFocus(e) {
  console.log(e.detail.height, "kkkk")
  state.bottom = Number(e.detail.height)
}
function onBlur() {
  state.bottom = 0
}

function loadCommentData() {
  getArticleCommentList(state.id).then(res => {
    const data = res.data
    state.comment = {
      ...data,
      total: data.total > 10000 ? `${numFormat(data.total / 10000, '0[.]0')}万` : data.total
    }
  })
}

function onArticleChange(val) {
  uni.redirectTo({
    url: `/package_square/pages/article/detail?id=${val.id}`
  })
}

function onToggleCommenLike(item) {
  postArticleCommentToggleLike(item.id, item.is_like).then(() => {
    item.like_num += item.is_like ? -1 : 1
    item.is_like = !item.is_like
  })
}

function onCommentComplaint(item) {
  state.actionComment = item
  state.complaintShow = true
}

function onComplaintSubmit() {
  state.complaintShow = false

  const params = {
    comment_id: state.actionComment?.id,
    content: complaintType[state.complaintIndex],
    // mobile: state.complaintContact
  }
  postArticleCommentTipOff(params).then(() => {
    showToast('举报成功')
  })
}

function onSendComment() {
  postArticleCommentAdd(state.id, state.commentContent).then(() => {
    showToast('评论成功')
    state.commentContent = ''
    loadCommentData()
  })
}

function getShareContent() {
  return {
    title: article.value?.title,
    imageUrl: article.value?.cover_image,
    path: `/package_square/pages/article/detail?id=${state.id}&parentId=${userStore.userInfo?.id}`
  }
}

onLoad(options => {
  state.id = options.id
  userStore.setParentId(options.parentId)

  loadData()
  loadCommentData()

  if (options.parentId) {
    postArticleShareStatistics(state.id)
  }
})

onShareAppMessage(() => getShareContent())
onShareTimeline(() => getShareContent())
</script>

<style lang="scss" scoped>
:deep(.input-placeholder) {
  color: #999
}

:deep(input) {
  color: #333
}

.border-top {
  border-top: 2rpx solid #eee;
}

.input-style {
  display: flex;
  align-items: center;
  padding-left: 32rpx;
  background-color: #f5f5f5;
  color: #b5b5b5;
  border-radius: 12rpx;
  flex: 1;
  height: 72rpx;
  font-size: 28rpx;
  line-height: 28rpx;
  border: 2rpx solid #DCDCDC
}

.popup-tap-style {
  display: inline-block;
  padding: 12rpx 44rpx;
  border: 2rpx solid #f4af22;
  color: #F4AF22;
  font-weight: 400;
  font-size: 28rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
}

.popup-tap-style-selected {
  display: inline-block;
  padding: 12rpx 44rpx;
  color: #999999;
  font-weight: 400;
  font-size: 28rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
  background-color: #f5f5f5
}

.popup-input-style {
  display: flex;
  align-items: center;
  padding-left: 30rpx;
  background-color: #ffffff;
  color: #999999;
  border-radius: 12rpx;
  flex: 1;
  height: 72rpx;
  font-size: 28rpx;
  line-height: 28rpx;
  border: 2rpx solid #666666
}

.popup-button-style {
  width: 100%;
  height: 68rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
  background-color: #F4AF22;
  color: #fff;
  font-size: 28rpx;
}

.btn-send {
  margin-left: 16rpx;
  padding: 16rpx 40rpx;
  border-radius: 10rpx;
  background-color: #F4AF22;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
}
</style>
